<template>
  <div class="creator">
    <div
      class="creator-all"
      v-for="(child, index) in children.children"
      :key="index"
    >
      <div class="creator-title" v-if="child.type === 'mCreator'">
        <div class="creator-img">
          <img :src="child.model.resource.avatar" />
        </div>
        <div class="creator-name">{{ child.model.resource.username }}</div>
        <div class="creator-card">
          <span>{{ child.model.resource.count.count_article }}作品</span>.
          <span>{{ child.model.resource.count.count_follower }}粉丝</span>
          <p>{{ child.model.resource.occupation }}</p>
        </div>
        <div class="guanzhu">
          <span>+<span>关注</span></span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ["children"],
};
</script>

<style lang="less" scoped>
.creator {
  display: flex;
  overflow-y: auto;
  width: 100%;
 margin: 10px 0;
  .creator-all {
   
    width: 50%;
    display: flex;
    flex-wrap: wrap;
    margin: 10px;
    background: white;
    flex-shrink: 0;
    border-radius: 10px;

    .creator-title {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      margin: 10px;
      .creator-img {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        img {
          width: 50px;
          border-radius: 50%;
        }
      }
      .creator-name {
        width: 100%;
        text-align: center;
        font-weight: 600;
      }
      .creator-card {
        width: 100%;
        text-align: center;
        font-size: 10px;
        color: #999;
        p {
          text-align: center;
        }
      }
      .guanzhu {
        width: 100%;
        display: flex;
        justify-content: center;
        span {
          text-align: center;
          background: #f00;
          color: white;
          width: 80px;
          height: 30px;
          line-height: 30px;
          border-radius: 20px;
          margin:0 5px;
        }
      }
    }
  }
}
</style>